<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九月手边书</title>
    <link rel="stylesheet" href="css/index.min.css">
    <script src="js/rem.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>

</head>

<body>
    <div class="root">
        <!-- 顶部 -->
        <div class="bg">

            <img src="imgs/log_01.png" alt="">

        </div>

        <!-- 日历 -->
        <div class="content con_rili">
            <img src="imgs/c_03.png" alt="" class="img_ qi">
            <hr class="hr_">
            <div class="fx_p">
                <p>Mon</p>
                <p>Tue</p>
                <p>Wed</p>
                <p>Thu</p>
                <p>Fri</p>
                <p class="lv">Sat</p>
                <p class="lv">Sun</p>
            </div>
            <div class="fx_d">
                <div><img src="imgs/date_0.png" alt=""></div>
                <div><img src="imgs/date_0.png" alt=""></div>
                <div><img src="imgs/date_0.png" alt=""></div>
                <div><img src="imgs/date_0.png" alt=""></div>
                <div><img src="imgs/date_0.png" alt=""></div>
                <div><img src="imgs/date_1.png" alt=""></div>
                <div><img src="imgs/date_2.png" alt=""></div>
                <div>
                    <a id="a3" href="#con_3"><img src="imgs/date_3.png" alt=""></a>
                </div>
                <div><img src="imgs/date_4.png" alt=""></div>
                <div>
                    <a id="a5" href="#con_5"><img src="imgs/date_5.png" alt=""></a>
                </div>
                <div><img src="imgs/date_6.png" alt=""></div>
                <div><img src="imgs/date_7.png" alt=""></div>
                <div>
                    <a id="a8" href="#con_8"><img src="imgs/date_8.png" alt=""></a>
                </div>
                <div><img src="imgs/date_9.png" alt=""></div>
                <div>
                    <a id="a10" href="#con_10"><img src="imgs/date_10.png" alt=""></a>
                </div>
                <div><img src="imgs/date_11.png" alt=""></div>
                <div><img src="imgs/date_12.png" alt=""></div>
                <div><img src="imgs/date_13.png" alt=""></div>
                <div><img src="imgs/date_14.png" alt=""></div>
                <div><img src="imgs/date_15.png" alt=""></div>
                <div>
                    <a id="a16" href="#con_16"><img src="imgs/date_16.png" alt=""></a>
                </div>
                <div><img src="imgs/date_17.png" alt=""></div>
                <div>
                    <a id="a18" href="#con_18"><img src="imgs/date_18.png" alt=""></a>
                </div>
                <div>
                    <a id="a19" href="#con_19"><img src="imgs/date_19.png" alt=""></a>
                </div>
                <div>
                    <a id="a20" href="#con_20"><img src="imgs/date_20.png" alt=""></a>
                </div>
                <div><img src="imgs/date_21.png" alt=""></div>
                <div>
                    <a id="a22" href="#con_22"><img src="imgs/date_22.png" alt=""></a>
                </div>
                <div>
                    <a id="a23" href="#con_23"><img src="imgs/date_23.png" alt=""></a>
                </div>
                <div>
                    <a id="a24" href="#con_24"><img src="imgs/date_24.png" alt=""></a>
                </div>
                <div><img src="imgs/date_25.png" alt=""></div>
                <div><img src="imgs/date_26.png" alt=""></div>
                <div>
                    <a id="a27" href="#con_27"><img src="imgs/date_27.png" alt=""></a>
                </div>
                <div>
                    <a id="a28" href="#con_28"><img src="imgs/date_28.png" alt=""></a>
                </div>
                <div><img src="imgs/date_29.png" alt=""></div>
                <div><img src="imgs/date_30.png" alt=""></div>
            </div>
            <img src="imgs/c_07.png" alt="" id="img_1">
            <img src="imgs/c_10.png" alt="" class="img_1">
        </div>

        <div class="content con_3" id="con_3">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_12.png" alt="" class="img__">
        </div>
        <div class="content con_5" id="con_5">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_95.png" alt="" class="img__">
        </div>
        <div class="content con_8" id="con_8">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_14.png" alt="" class="img__">
        </div>
        <div class="content con_10" id="con_10">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_16.png" alt="" class="img__">
        </div>
        <div class="content con_16" id="con_16">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_18.png" alt="" class="img__">
        </div>
        <div class="content con_18" id="con_18">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_20.png" alt="" class="img__">
        </div>
        <div class="content con_19" id="con_19">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_22.png" alt="" class="img__">
        </div>
        <div class="content con_20" id="con_20">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_24.png" alt="" class="img__">
        </div>
        <div class="content con_22" id="con_22">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_26.png" alt="" class="img__">
        </div>
        <div class="content con_23" id="con_23">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_28.png" alt="" class="img__">
        </div>
        <div class="content con_24" id="con_24">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_30.png" alt="" class="img__">
        </div>
        <div class="content con_27" id="con_27">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_32.png" alt="" class="img__">
        </div>
        <div class="content con_28" id="con_28">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_34.png" alt="" class="img__">
        </div>
        <div class="content con_29" id="con_29">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_1">
            <img src="imgs/lianjie_.png" alt="" class="lj lian_2">
            <img src="imgs/c_36.png" alt="" class="img__">
        </div>
        <p id="dibu">以上案例版权归广告主所有，仅供参考，请勿抄袭！</p>


        <img src="imgs/top_.png" alt="" id="top">
    </div>
</body>
<script>
    $(document).ready(function() {
        var speed = 800; //自定义滚动速度 
        //回到顶部
        $("#top").click(function() {
            $("html,body").animate({
                "scrollTop": 0
            }, speed);
        })

        //top隐藏显示
        $(function() {
            // var h3_height = $("h3").offset().top;
            $(window).scroll(function() {
                var this_scrollTop = $(this).scrollTop();
                if (this_scrollTop > 200) {
                    $("#top").show();
                } else {
                    $("#top").hide();
                }
            });
        });

        //锚链接平滑滚动
        $("#a3").click(function() {
            $("html,body").animate({
                scrollTop: $("#con_3").offset().top
            }, 1000)
        });
        $('#a5').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_5').offset().top
            }, 1000)
        });
        $('#a8').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_8').offset().top
            }, 1000)
        });
        $('#a10').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_10').offset().top
            }, 1000)
        });
        $('#a16').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_16').offset().top
            }, 1000)
        });
        $('#a18').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_18').offset().top
            }, 1000)
        });
        $('#a19').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_19').offset().top
            }, 1000)
        });
        $('#a20').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_20').offset().top
            }, 1000)
        });
        $('#a22').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_22').offset().top
            }, 1000)
        });
        $('#a23').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_23').offset().top
            }, 1000)
        });
        $('#a24').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_24').offset().top
            }, 1000)
        });
        $('#a27').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_27').offset().top
            }, 1000)
        });
        $('#a28').click(function() {
            $("html,body").animate({
                scrollTop: $('#con_28').offset().top
            }, 1000)
        });
    })
</script>

</html>